<template>
    <div class="content-right">
        <el-card class="box-card" style="width: 110px;height: 100%;background-color: #F7F7F7;float: left">
            <div slot="header" class="clearfix">
                <span> 电表选择</span>
            </div>
            <el-menu
                    default-active="2"
                    class="el-menu-vertical-demo"
                    @open="handleOpen"
                    @close="handleClose"
                    background-color="#F7F7F7"
                    text-color="#fff"
                    active-text-color="#ffd04b">
                <el-menu-item index="1">
                    <i class="el-icon-s-finance"></i>
                    <span slot="title">电表一</span>
                </el-menu-item>
                <el-menu-item index="2">
                    <i class="el-icon-s-finance"></i>
                    <span slot="title">电表二</span>
                </el-menu-item>
                <el-menu-item index="3">
                    <i class="el-icon-s-finance"></i>
                    <span slot="title">电表三</span>
                </el-menu-item>
                <el-menu-item index="4">
                    <i class="el-icon-s-finance"></i>
                    <span slot="title">电表一</span>
                </el-menu-item>
                <el-menu-item index="5">
                    <i class="el-icon-s-finance"></i>
                    <span slot="title">电表一</span>
                </el-menu-item>
                <el-menu-item index="6">
                    <i class="el-icon-s-finance"></i>
                    <span slot="title">电表一</span>
                </el-menu-item>
                <el-menu-item index="7">
                    <i class="el-icon-s-finance"></i>
                    <span slot="title">电表一</span>
                </el-menu-item>
                <el-menu-item index="8">
                    <i class="el-icon-s-finance"></i>
                    <span slot="title">电表一</span>
                </el-menu-item>
                <el-menu-item index="9">
                    <i class="el-icon-s-finance"></i>
                    <span slot="title">电表一</span>
                </el-menu-item>
            </el-menu>
        </el-card>

        <div style="">所属生产线:富马生产线</div>

        <el-card shadow="hover">
            <div slot="header">
                <span>筛选</span>
            </div>
            时间:
            <el-select v-model="value" placeholder="本周">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
            <el-button type="success" size="mini">导出</el-button>
        </el-card>
        <div id="main" style="width:1350px;height:360px;float:left"></div>
        <div id="bar" style="width:600px;height:360px;float:left"></div>

        <div style="width:700px;height:360px;float:left">
            <el-tabs type="border-card">
                <el-tab-pane label="用电量">
                    <div id="energy_consumption" style="width:670px;height:250px;padding-top: 20px">
                        <el-table
                                :data="tableData"
                                border
                                show-summary
                                style="width: 100%">
                            <el-table-column
                                    prop="name"
                                    label="类型名称"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="use"
                                    label="电量值(kWh)">
                            </el-table-column>
                            <el-table-column
                                    prop="lastMonthUse"
                                    sortable
                                    label="上月同期">
                            </el-table-column>
                            <el-table-column
                                    prop="huan"
                                    sortable
                                    label="环比">
                            </el-table-column>
                            <el-table-column
                                    prop="bi"
                                    sortable
                                    label="占比(%)">
                            </el-table-column>
                        </el-table>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="用电费用">
                    <div id="" style="width:670px;height:250px;padding-top: 20px">
                        <el-table
                                :data="tableData"
                                border
                                show-summary
                                style="width: 100%">
                            <el-table-column
                                    prop="name"
                                    label="类型名称"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="use"
                                    label="用电费(kWh)">
                            </el-table-column>
                            <el-table-column
                                    prop="lastMonthUse"
                                    sortable
                                    label="上月同期">
                            </el-table-column>
                            <el-table-column
                                    prop="huan"
                                    sortable
                                    label="环比">
                            </el-table-column>
                            <el-table-column
                                    prop="bi"
                                    sortable
                                    label="占比(%)">
                            </el-table-column>
                        </el-table>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>



    </div>


</template>

<script>
    import DatePage from '../../../common/components/Date'
    import ChartPage from './chartpage'
    import TablePage from './table'

    export default {
        components: {
            DatePage,
            ChartPage,
            TablePage
        },
        data() {
            return {
                value: '',
                G2Data: [
                    {name: '2016', value: 2},
                    {name: '2017', value: 1},
                    {name: '2018', value: 3}
                ],
                tableData: [{
                    name: '峰电量',
                    use: 222,
                    lastMonthUse: 200,
                    huan: 230,
                    bi:43
                },{
                    name: '平电量',
                    use: 200,
                    lastMonthUse: 180,
                    huan: 200,
                    bi:40
                },{
                    name: '谷电量',
                    use: 100,
                    lastMonthUse: 80,
                    huan: 100,
                    bi:17
                }]
            }
        }, methods: {

            getSummaries(param) {
                const { columns, data } = param;
                const sums = [];
                columns.forEach((column, index) => {
                    if (index === 0) {
                        sums[index] = '总价';
                        return;
                    }
                    const values = data.map(item => Number(item[column.property]));
                    if (!values.every(value => isNaN(value))) {
                        sums[index] = values.reduce((prev, curr) => {
                            const value = Number(curr);
                            if (!isNaN(value)) {
                                return prev + curr;
                            } else {
                                return prev;
                            }
                        }, 0);
                        sums[index] += ' 元';
                    } else {
                        sums[index] = 'N/A';
                    }
                });

                return sums;
            }

        }, mounted() {


            // 基于准备好的dom，初始化echarts实例
            const myChart = this.$echarts.init(document.getElementById('main'));

            // 指定图表的配置项和数据
            let option = {
                title: {
                    text: '电量值',
                    left: 'center',
                },
                tooltip: {},
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['4-20', '4-21', '4-22', '4-23', '4-24', '4-25', '4-26'],

                },
                yAxis: {
                    type: 'value',
                    name: '单位(kWh）'

                },
                series: [{
                    data: [120, 200, 150, 80, 70, 110, 130],
                    type: 'bar',
                    barWidth: 48,
                    showBackground: true,
                    itemStyle: {
                        normal: {
                            color: '#40D095'
                        }
                    },

                    backgroundStyle: {
                        color: 'rgba(220, 220, 220, 0.8)'
                    }
                }]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);


            // 基于准备好的dom，初始化echarts实例
            const myChart1 = this.$echarts.init(document.getElementById('bar'));

            // 指定图表的配置项和数据
            let option1 = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 80,
                    top: 150,
                    data: ['峰电量', '平电量', '谷电量']
                },
                series: [
                    {
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            {
                                value: 335, name: '峰电量',
                                itemStyle: {
                                    normal: {
                                        color: '#B8DCFF'
                                    }
                                },
                            },
                            {value: 310, name: '平电量',itemStyle: {
                                    normal: {
                                        color: '#B8FFD5'
                                    }
                                },},
                            {value: 234, name: '谷电量',itemStyle: {
                                    normal: {
                                        color: '#FFECB8'
                                    }
                                },},
                        ]
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart1.setOption(option1);


        }
    }
</script>

<style lang="scss" scoped>
    .content-right {
        width: 98%;
        height: 96%;
        border-radius: 4px;
        background-color: #FFFFFF;
        box-shadow: 0px 0px 8px 0px #ccc;
        overflow: hidden;

        .info-top {
            width: 100%;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: left;
            border-left: 8px solid #40e0ff;
            border-radius: 8px 8px 0 0;
            background: #f9f9f9;

            span {
                margin-left: .625rem;
                font-size: 1rem;
                color: #333;
            }
        }

        .contentBox {
            width: 98%;
            height: 100%;
            margin: 0 auto;
            position: relative;

            .content-top {
                display: flex;
                flex-wrap: wrap;
                margin-top: 1.25rem;

                .bnt-box {
                    width: 18.125rem;
                    height: auto;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 8px;
                    margin-right: 2%;
                    background: #EDEDED;
                    margin-bottom: .625rem;

                    .text {
                        width: 25%;
                        font-size: .8125rem;
                        text-align: center;
                        color: #333333;
                        font-family: 'Microsoft YaHei';
                        letter-spacing: .0625rem
                    }

                    .select {
                        width: 75%;
                        text-align: right;
                    }

                    // .DatePicker{
                    //   width: 75%;
                    //   text-align: right;
                    // }
                }

                .Date-box {
                    width: 26.25rem;
                    margin-bottom: .625rem;
                }
            }

            .chart {
                width: 100%;
                height: auto;
                margin: 0 auto;
            }

        }


    }

    .el-menu-item {
        height: 40px;
        align-content: center;
        padding-left: 5px !important;
        background-color: #F7F7F7 !important;
        color: #0D0D0D !important;
    }

    /*el-menu-vertical-demo el-menu{*/
    /*    background-color:#F7F7F7 !important;*/
    /*}*/
    .el-menu {
        border-right: 0;
    }


    .box-card {
        width: 100%;
        height: 100px;
    }

    .el-card__body {
        padding: 5px;
        height: 30px !important;
    }

</style>
<style>
    .contentBox .el-select .el-input.is-focus .el-input__inner {
        border-color: #ccc !important;
    }

    .contentBox .el-select .el-input__inner:focus {
        border-color: #ccc !important;
    }

    .contentBox .bnt-box .el-select {
        width: 100% !important;
    }

    .el-card__header {
        padding: 5px 5px !important;
    }

</style>
